<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/mobile/include/taglib.jsp"%>
<html>
<head>
	<title>乐活商圈</title>
	<link href="${ctxFront}/css/business.css" type="text/css" rel="stylesheet" />
	<script src="${ctxStatic }/ferroSlider-2.3.3/js/jquery-1.9.1.min.js" type="text/javascript"></script>
	<script src="${ctxStatic}/front/mobile/js/validate.js" type="text/javascript"></script>
	<link rel="stylesheet" rev="stylesheet" href="${ctxStatic }/ferroSlider-2.3.3/css/reset.css" type="text/css" media="all">
	<link rel="stylesheet" href="${ctxStatic }/ferroSlider-2.3.3/css/style_new.css" />
	<link rel="stylesheet" href="${ctxStatic }/ferroSlider-2.3.3/css/jquery.ferro.ferroSlider.css" />
	<link rel="stylesheet" href="${ctxStatic }/ferroSlider-2.3.3/css/hacks.css" />
	<link rel="stylesheet" href="${ctxStatic }/ferroSlider-2.3.3/css/font-awesome.css" />
	<script src="${ctxStatic }/ferroSlider-2.3.3/js/jquery.transit.js" type="text/javascript" language="javascript"></script>
	<script src="${ctxStatic }/ferroSlider-2.3.3/js/jquery.ferro.ferroSlider-2.3.3.min.js" type="text/javascript" language="javascript"></script>
	<script src="${ctxStatic}/front/mobile/js/loadImage.js" type="text/javascript"></script>
	<script src="${ctxStatic}/front/mobile/js/mobileVersion.js" type="text/javascript"></script>
	<script type="text/javascript"> 
	var appId = '${appId}';
	var sid="${merchant.id}";
	var mobile="${mobile}";
	var openNewUrl = "";
	var activityTimes = new Array();
	var timeNum = ${timeNum};
	$(document).ready(function() {
		initSlider();
		initModuleSize();
		window.onresize=function(){
			initModuleSize();
			$("#ferroslider-navigation-map").css("bottom", "10px");
		}
		$(".bannerDiv").bind("click", function(){
			return false;
		});
		
		if(${fn:length(activity.timeList)}>0){  //加载进来时封装商品信息
			activityTimes = new Array();
			<c:forEach items="${activity.timeList}" var="time" varStatus="ps">
				if('${time.activityDateStr}'!=''){
					var item = new Object();
					item.id="${time.id}";
					item.activityDate='${time.activityDateStr}';
					item.startTime='${time.startTime}';
					item.endTime='${time.endTime}';
					activityTimes.push(item);
				}
			</c:forEach>
		}
		
		document.body.addEventListener('touchmove', function (event) {
			if($global_isAndroid){
				event.preventDefault(); 
			}
		}, false);
	});
	function initSlider(){
		$(".slidingSpaces").ferroSlider({
			autoSlide				: true,
			container				: "#container-business",
			createMap				: true,
			createPlayer			: true,
			createTimeBar			: true,
			easing					: 'snap',
			mapPosition				: "bottom_right",
			playerPosition			: "bottom_10px",
			time					: 200,
			tips					: true
		});
		$("#ferroslider-player").hide();
		$("#ferroslider-navigation-map").css("bottom", "10px");
		$(".navigation-dot").width(10).height(10);
	}
	function initModuleSize(){
		var topH = $(".business-banner").height();
		var midH = $(".hangStore").height();
		var botH = $(".activity").height();
		$(".hs-child1").width(($(window).width()-26)/2).height(midH);
		$(".hs-child").width(($(window).width()-26)/2).height((midH-5)/2);
		$(".lehuo-img").width(($(window).width()-20)*0.45);
		$(".activity-img").width(($(window).width()-20)*0.5).height((botH-20)/2);
		
	}
	function showShopPage(url){
		if(${appId!="" && appId!=null}){ //手机端app进来，调用iEvent://openNewPage?url=协议
			if(url.indexOf("mobile")==-1){
				openNewUrl = url+"&mobile=${mobile}&appId="+appId;
			}else{
				openNewUrl = url+"&appId="+appId;
			}
			document.location="iEvent://openNewPage?fun=iEventOpenNewPage()";
		}else{
			if(url.indexOf("mobile")==-1){
				document.location=url+"&mobile=${mobile}&appId="+appId;
			}else{
				document.location=url+"&appId="+appId;
			}
		}
	}
	var iEventOpenNewPage = function(){
		if($global_isAndroid)
			document.location=openNewUrl;
		else
			return openNewUrl;
	}
	//定时器更新抢购活动时间
	var activityInterval = setInterval("activityTimer()",1000);//1000为1秒钟
	function activityTimer(){
		var activityDate = $("#activityDate").val();
		var startTime = $("#startTime").val();
		var endTime = $("#endTime").val();
		var nowDate = new Date();
        var year = nowDate.getFullYear();       //年
        var month = nowDate.getMonth() + 1;     //月
        var day = nowDate.getDate();            //日
        var startDate = new Date((activityDate+" "+startTime).replace(/\-/g, "\/"));
        var endDate = new Date((activityDate+" "+endTime).replace(/\-/g, "\/"));
        if(nowDate<startDate){ //时间活动还未开始
        	$(".time-title").text("距离开始");
        	var time=(startDate.getTime()-nowDate.getTime());//毫秒
			reckonTime(time);
			//alert("距离开始："+$(".hours").text()+"小时"+$(".minutes").text()+"分钟"+$(".seconds").text()+"秒");
        }else{
        	if(nowDate>=startDate && nowDate<endDate){
        		$(".time-title").text("距离结束");
        		var time=(endDate.getTime()-nowDate.getTime());//毫秒
				reckonTime(time);
				//alert("距离结束："+$(".hours").text()+"小时"+$(".minutes").text()+"分钟"+$(".seconds").text()+"秒");
        	}else{
        		$(".time-title").text("活动结束");
        		$(".hours").text("00");
        		$(".minutes").text("00");
        		$(".seconds").text("00");
        		//进入下一场活动
        		timeNum++;
        		if(timeNum<=(activityTimes.length-1)){
        			var time = activityTimes[timeNum];
        			$("#activityDate").val(time.activityDate);
        			$("#startTime").val(time.startTime);
        			$("#endTime").val(time.endTime);
        		}else{
        			//暂停计时器
        			clearInterval(activityInterval);
        		}
        	}
        }
        
	}
	function reckonTime(time){
		var hours=(time/(1000*60*60));
		hours = parseInt(hours);
		$(".hours").text(hours<10?0+""+hours:hours);
		time=time-hours*(1000*60*60);
		var minutes = time/(1000*60);
		minutes = parseInt(minutes);
		$(".minutes").text(minutes<10?0+""+minutes:minutes);
		time=time-minutes*(1000*60);
		var seconds = time/1000;
		seconds = parseInt(seconds);
		$(".seconds").text(seconds<10?0+""+seconds:seconds);
	}
	</script>
</head>
<body style="margin: 0px; background-color: #e0e0e0;">
<form:form id="inputForm">
	<div class="business-banner">
	<c:if test="${fn:length(hangStorePage.list)>0}">
	<div id="container-business"></div>
	<c:forEach items="${rollScreenPage.list}" var="rollScreen" varStatus="rs">
	<div id="div${rs.index }" class="slidingSpaces demo5 bannerDiv" title="${rollScreen.title }" data-bgimage="${ctxShop}/download?filePath=${rollScreen.logoUrl}" appId="${appId }" href="${rollScreen.webUrl }"></div>
	</c:forEach>
	</c:if>
	</div>
	<div class="hangStore">
	<c:if test="${fn:length(hangStorePage.list)>0}">
		<c:forEach items="${hangStorePage.list}" var="hangStore" varStatus="hs">
		<c:if test="${hs.index<=2}">
			<nobr>
			<c:if test="${hs.index==0}">
			<a href="javascript:;" onclick="showShopPage('${hangStore.classify.shopUrl}')"><img id="photo${hs.index }" src="${ctxFront }/images/loading.png" path="${ctxShop}/download?filePath=${hangStore.logoUrl}" class="displayImages hs-child1 margin-right10"/></a>
			</c:if>
			</nobr>
			<nobr>
			<c:if test="${hs.index==1}">
			<a href="javascript:;" onclick="showShopPage('${hangStore.classify.shopUrl}')"><img id="photo${hs.index }" src="${ctxFront }/images/loading.png" path="${ctxShop}/download?filePath=${hangStore.logoUrl}" class="displayImages hs-child"/></a>
			</c:if>
			<c:if test="${hs.index==2}">
			<a href="javascript:;" onclick="showShopPage('${hangStore.classify.shopUrl}')"><img id="photo${hs.index }" src="${ctxFront }/images/loading.png" path="${ctxShop}/download?filePath=${hangStore.logoUrl}" class="displayImages hs-child margin-top5"/></a>
			</c:if>
			<!-- 
			<c:if test="${hs.index==3}">
			<a href="javascript:;" onclick="showShopPage('${hangStore.classify.shopUrl}')"><img id="photo${hs.index }" src="${ctxFront }/images/loading.png" path="${ctxShop}/download?filePath=${hangStore.logoUrl}" class="displayImages hs-child margin-top5"/></a>
			</c:if>
			 -->
			</nobr>
		</c:if>
		</c:forEach>
	</c:if>
	</div>
	<div class="mid-bg"></div>
	<div class="activity">
		<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
			<tr>
				<td width="50%" height="50%" class="border-right-huise" style="vertical-align: top;" rowspan="2"
					 onclick="showShopPage('${ctxShop}/business/activity?id=${activity.id }&sid=${merchant.id }&mobile=${mobile }')">
					<input type="hidden" id="activityDate" value="<fmt:formatDate value="${activity.activityDate }" pattern="yyyy-MM-dd"/>" />
					<input type="hidden" id="startTime" value="${activity.startTime }" />
					<input type="hidden" id="endTime" value="${activity.endTime }" />
					<div style="height: auto;">
					<!-- 乐活抢购倒计时 -->
					<div class="color-cs margin-top5 margin-left10 font-size16">${activity.name }</div>
					<c:if test="${activity.assisTitle!='' && activity.assisTitle!=null}">
					<div class="activity-time margin-top5 color-red margin-left10 font-weight-bold font-size12">${activity.assisTitle}</div>
					</c:if>
					<div class="activity-time margin-top5 margin-left10">
						<table border="0" cellpadding="0" cellspacing="0">
							<tr>
								<td valign="bottom" class="color-huise time-title font-size12">距离开始</td>
								<td width="20"><label class="color-huise min-time hours" style="font-size: 12px;">00</label></td>
								<td valign="bottom" class="color-huise">:</td>
								<td width="20"><label class="color-huise min-time minutes" style="font-size: 12px;">00</label></td>
								<td valign="bottom" class="color-huise">:</td>
								<td width="20"><label class="color-huise min-time seconds" style="font-size: 12px;">00</label></td>
							</tr>
						</table>
					</div>
					</div>
					<!-- 乐活抢购 -->
					<a href="javascript:;" onclick="showShopPage('${ctxShop}/business/activity?id=${activity.id }&sid=${merchant.id }&mobile=${mobile }')" style="display:block; width:100%; height:auto; text-align:center; margin-top: 5%;"><img class="displayImages activity-img"  id="photo5" src="${ctxFront }/images/loading.png" path="${ctxShop }/download?filePath=${activity.logoUrl}" width="80%" height="100%"/></a>
				</td>
				<td width="50%" height="50%" align="center" class="border-bottom-huise margin-left10">
					<!-- 最新优惠 -->
					<a href="javascript:;" onclick="showShopPage('${ctxShop}/business/concession?id=${concession.id }&sid=${merchant.id }&mobile=${mobile }')"><img class="displayImages activity-img" id="photo4" src="${ctxFront }/images/loading.png" path="${ctxShop}/download?filePath=${concession.logoUrl}" width="100%" height="100%"/></a>
				</td>
			</tr>
			<tr>
				<td align="center" height="50%">
					<!-- 配送规则 -->
					<a href="javascript:;" onclick="showShopPage('${ctxShop}/sysClause?clauseId=${merchant.merchantClause.id }&sid=${merchant.id }&mobile=${mobile }')"><img class="displayImages activity-img"  id="photo6" src="${ctxFront }/images/loading.png" path="${ctxFront }/images/business/4.jpg" width="100%" height="100%"/></a>
				</td>
			</tr>
		</table>
	</div>		
</form:form>
<script type="text/javascript"> 
	function startLoadImage(){
		$(".displayImages").each(function(index){
			loadImage($(this).attr("id"),$(this).attr("path"),loadResult);
		});
	}
	//预加载图片
	startLoadImage();
</script>
</body>
</html>